<template>
  <div id="vip">
    <div id="inf">
      <div class="name">
        <span class="icon"></span>
        <span class="namecon">{{phone}}</span>
      </div>
      <div class="integral">
        <div class="integralitem">
          <span>0</span>
          <span>可用积分</span>
        </div>
        <div class="integralitem">
          <span>0</span>
          <span>预估收益</span>
        </div>
      </div>
    </div>
    <!-- 会员特权 -->
    <div class="privilege">
      <div class="title">会员专属特权</div>
      <div class="pri_cons">
        <figure class="pri_con">
          <img src="http://ifile.360hwj.com/wap/images/members_integral@2x.png" alt />
          <figcaption>会员积分</figcaption>
        </figure>
        <figure class="pri_con">
          <img src="http://ifile.360hwj.com/wap/images/members_vouchers@2x.png" alt />
          <figcaption>领券中心</figcaption>
        </figure>
        <figure class="pri_con">
          <img src="http://ifile.360hwj.com/wap/images/members_integral_earnings@2x.png" alt />
          <figcaption>到账收益</figcaption>
        </figure>
      </div>
    </div>
    <!-- 今日抢购 -->
    <div class="content rushToBuy">
      <div class="rushTitle">
        <span class="line"></span>
        <span class="titlename">
          <img src="http://ifile.360hwj.com/wap/images/jinriqianggoulogo@2x.png" />
        </span>
        <span class="line"></span>
      </div>
      <div class="rush_to_buy_cons">
        <div class="rush_to_buy_con" v-for="(item) in rushToBuy" :key="item.goodsId">
          <div class="imgcon">
            <img :src="item.goodsImage" alt />
            <div class="txt">
              <p class="txt_1">每人抢购{{item.seckillMemberRankNum}}</p>
              <van-tag round>{{item.startDate.slice(5,16).replace("-","月").replace(" ","日 ")}}</van-tag>
            </div>
          </div>
          <p class="van-multi-ellipsis--l2" v-html="item.goodsFullname"></p>
          <p class="goodsPrice">
            <span>￥</span>
            <span v-html="item.seckillMemberRankPrice"></span>
            <span>秒杀价</span>
          </p>
          <del v-html="'￥'+ item.goodsPrice"></del>
        </div>
      </div>
      <div class="sec_more">查看更多</div>
    </div>
    <!-- 会员券 -->
    <div class="content">
      <div class="rushTitle">
        <span class="line"></span>
        <span class="titlename col">限时特惠</span>
        <span class="titlename">会员专享券</span>
        <span class="line"></span>
      </div>
      <div class="discountcons">
        <div class="discountcon" v-for="(item) in discount " :key="item.couponId">
          <div class="l_con">
            <p class="order">限领</p>
            <div class="discountTxt">
              <p class="percent" v-html="item.discountPercent +'折'"></p>
              <p class="couponIntro" v-html="item.couponIntro"></p>
              <p class="van-ellipsis">
                <span v-html="item.discountScope"></span>
                <span v-html="item.discountContent"></span>
              </p>
            </div>
          </div>
          <div class="r_con">
            <span>立</span>
            <span>即</span>
            <span>领</span>
            <span>取</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "../Api/index.js";
import imgUrl from "../assets/images/todayBuy_03.jpg";

export default {
  data() {
    return {
      imgUrl,
      rushToBuy: [],
      discount: [],
      phone: this.$store.state.common.user.phone
    };
  },
  async created() {
    //今日抢购
    this.rushToBuy = (await Api.hl.get("")).data.data.splice(0, 3);
    //会员折扣
    this.discount = (await Api.discount.get("")).data.data;
  }
};
</script>
<style lang="scss" scoped>
.w {
  width: 10rem;
  margin: 0 auto;
}
.col {
  color: #fd5b00;
}
#vip {
  @extend .w;
  background-color: #f6f6f6;
  overflow-y: auto;
  #inf {
    position: relative;
    height: 5.333333rem;
    background: url(http://ifile.360hwj.com/wap/images/members_card@2x.png)
      no-repeat center center;
    background-size: 100% 100%;
    .name {
      position: absolute;
      top: 1.013333rem;
      left: 1.36rem;
      display: flex;
      height: 1.333333rem;
      font-size: 0.373333rem;
      color: #f5daaa;
      .icon {
        width: 1.333333rem;
        height: 100%;
        background: url(http://image.360hwj.com/mall/J2zAA1mZH6-AQ-G_AAAEadr9AHg271.png)
          no-repeat center center;
        background-size: 100% 100%;
        border-radius: 50%;
      }
      .namecon {
        margin-top: 0.266667rem;
        margin-left: 0.56rem;
        font-weight: bold;
      }
    }
    .integral {
      position: absolute;
      top: 2.56rem;
      height: 1.333333rem;
      width: 100%;
      display: flex;
      justify-content: space-around;
      .integralitem {
        display: flex;
        flex-direction: column;
        text-align: center;
        span:nth-child(1) {
          font-size: 0.56rem;
          font-weight: bold;
          color: #f5daaa;
          font-family: "grundig din-medium";
        }
        span:nth-child(2) {
          font-size: 0.32rem;
          margin-top: 0.426667rem;
          color: #7f96a6;
        }
      }
    }
  }
  //会员特权
  .privilege {
    padding: 0.586667rem 0 0.986667rem 0;
    .title {
      padding-left: 0.56rem;
      font-size: 0.453333rem;
      font-weight: bold;
    }
    .pri_cons {
      margin-top: 0.613333rem;
      display: flex;
      justify-content: space-around;
      .pri_con {
        height: 2.32rem;
        img {
          height: 1.6rem;
          width: 1.6rem;
        }
        figcaption {
          margin-top: 0.373333rem;
          font-size: 0.373333rem;
          font-weight: bold;
        }
      }
    }
  }

  .content {
    width: 9.493333rem;
    margin: 0 auto;
    background-color: #fff;
    .rushTitle {
      text-align: center;
      padding: 0.533333rem 0;
      .line {
        display: inline-block;
        width: 1.306667rem;
        height: 0.026667rem;
        line-height: 0.4rem;
        background-color: #f5daaa;
      }
      .titlename {
        display: inline-block;
        margin: 0 0.453333rem;
        font-size: 0.4rem;
        img {
          width: 1.786667rem;
          height: 0.453333rem;
        }
      }
    }
  }

  //今日抢购
  .rush_to_buy_cons {
    display: flex;
    justify-content: space-around;
    height: 6.6rem;
    .rush_to_buy_con {
      width: 2.72rem;
      font-size: 0.293333rem;
      text-align: center;
      img {
        width: 2.72rem;
        height: 2.72rem;
      }
      del {
        font-size: 0.24rem;
        line-height: 0.24rem;
        float: left;
      }
      .imgcon {
        position: relative;
        height: 3.56rem;
        .txt {
          position: absolute;
          bottom: 0;
          z-index: 999;
          height: 1.2rem;
          width: 100%;
          background: url(http://ifile.360hwj.com/wap/images/members_purchase_bg@2x.png)
            no-repeat center center;
          background-size: 100% 100%;
          font-size: 0.266667rem;
          line-height: 0.266667rem;
          .txt_1 {
            margin: 0.213333rem 0;
          }
          .van-tag--default {
            background: #484743;
            font-size: 0.266667rem;
          }
        }
      }
      .van-multi-ellipsis--l2 {
        margin: 0.32rem 0;
      }
      .goodsPrice {
        text-align: left;
        span:nth-child(1) {
          font-size: 0.24rem;
          margin-right: 0.066667rem;
        }
        span:nth-child(2) {
          font-size: 0.293333rem;
          font-weight: bold;
        }
        span:nth-child(3) {
          display: inline-block;
          width: 0.933333rem;
          height: 0.346667rem;
          margin-left: 0.133333rem;
          font-size: 0.213333rem;
          padding-left: 0.133333rem;
          color: #fff;
          background: url(http://ifile.360hwj.com/wap/images/members_purchase_dialog@2x.png)
            no-repeat left center;
          background-size: 100% 100%;
        }
      }
    }
  }
  .sec_more {
    height: 0.666667rem;
    width: 1.973333rem;
    line-height: 0.666667rem;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 0.666667rem;
  }
  //折扣券
  .discountcons {
    height: 6rem;
    padding-left: 0.266667rem;
    display: -webkit-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    .discountcon {
      width: 3.52rem;
      height: 2.4rem;
      margin-right: 0.4rem;
      background: url(http://ifile.360hwj.com/wap/images/vouchers_short_golden@2x.png)
        no-repeat center center;
      background-size: 100% 100%;
      .l_con {
        width: 2.453333rem;
        float: left;
        .order {
          height: 0.453333rem;
          width: 0.906667rem;
          color: #fff;
          line-height: 0.453333rem;
          font-size: 0.266667rem;
          text-align: center;
          background: url(http://ifile.360hwj.com/wap/images/vouchers_upperleft@2x.png)
            no-repeat center center;
          background-size: 100% 100%;
        }
        .discountTxt {
          padding-left: 0.133333rem;
          .percent {
            font-size: 0.533333rem;
            line-height: 0.533333rem;
            color: #f5daaa;
            margin-top: 0.24rem;
          }
          .couponIntro {
            font-size: 0.24rem;
            line-height: 0.24rem;
            margin: 0.16rem 0;
          }
          .van-ellipsis {
            font-size: 0.16rem;
          }
        }
      }
      .r_con {
        float: right;
        width: 0.72rem;
        padding-top: 0.4rem;
        span {
          display: block;
          font-size: 0.266667rem;
          text-align: center;
          font-weight: bold;
          margin-bottom: 0.106667rem;
        }
      }
    }
  }
}

/* 图片绝对地址
1、头部：http://ifile.360hwj.com/wap/images/members_card@2x.png 
2、限时折扣：http://ifile.360hwj.com/wap/images/vouchers_short_golden@2x.png  http://ifile.360hwj.com/wap/images/vouchers_upperleft@2x.png
3、会员特权：http://ifile.360hwj.com/wap/images/members_integral_dialog@2x.png
http://ifile.360hwj.com/wap/images/members_integral@2x.png
http://ifile.360hwj.com/wap/images/members_vouchers@2x.png
http://ifile.360hwj.com/wap/images/members_integral_earnings@2x.png
4、今日抢购
http://ifile.360hwj.com/wap/images/members_purchase_bg@2x.png
http://ifile.360hwj.com/wap/images/members_purchase_dialog@2x.png
*/
</style>